<template>
  <div class="container">
    <div class="tags-page" v-loading="loading" element-loading-background="rgba(255, 255, 255, 0.7)">
      <h1 class="page-title">标签</h1>
      <p class="page-description">浏览不同主题的文章</p>

      <div class="tags-cloud">
        <router-link
          v-for="tag in allTags"
          :key="tag.id"
          :to="`/posts?tagId=${tag.id}`"
          class="tag-link"
          :style="{ fontSize: getTagSize(tag.useCount) }"
        >
          {{ tag.tagName }} <span class="tag-count">{{ tag.useCount }}</span>
        </router-link>
      </div>

      <div class="popular-tags">
        <h2 class="section-title">热门标签</h2>
        <div class="popular-tags-list">
          <div
            v-for="tag in hottestTags"
            :key="tag.id"
            class="popular-tag card"
          >
            <router-link :to="`/posts?tagId=${tag.id}`" class="popular-tag-link">
              <h3 class="popular-tag-name">{{ tag.tagName }}</h3>
              <p class="popular-tag-count">{{ tag.postCount || 0 }} 篇文章</p>
            </router-link>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { getAllAndHottestTags } from "../api/tags.js";

const allTags = ref([])
const hottestTags = ref([])
const loading = ref(true)

onMounted(() => {
  getAllAndHottestTags().then((res) => {
    allTags.value = res.data.allTags
    hottestTags.value = res.data.hottestTags
  }).finally(() => {
    loading.value = false
  })
})

// 获取标签大小（基于出现次数）
const getTagSize = (count) => {
  const min = 0.9
  const max = 2
  const maxCount = Math.max(...allTags.value.map(t => t.useCount))
  const size = min + (count / maxCount) * (max - min)
  return `${size}rem`
}
</script>

<style scoped>
.tags-page {
  min-height: 70vh;
  padding: 2rem 0;
}

.page-title {
  font-size: 2.5rem;
  margin-bottom: 0.5rem;
}

.page-description {
  font-size: 1.125rem;
  margin-bottom: 2rem;
  color: #555;
}

.section-title {
  font-size: 1.75rem;
  margin: 3rem 0 1.5rem;
}

.tags-cloud {
  background-color: white;
  border-radius: 12px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
  padding: 2.5rem;
  display: flex;
  flex-wrap: wrap;
  gap: 1.2rem;
  align-items: center;
}

.tag-link {
  color: var(--color-primary);
  display: inline-block;
  padding: 0.5rem 1rem;
  border-radius: 20px;
  transition: all 0.3s ease;
  font-weight: 500;
  background-color: #f3f4f6;
  border: 1px solid transparent;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.tag-link:hover {
  background-color: var(--color-primary);
  color: white;
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  text-decoration: none;
}

.tag-count {
  font-size: 0.75em;
  background-color: rgba(255, 255, 255, 0.3);
  padding: 0.15rem 0.4rem;
  border-radius: 10px;
  margin-left: 0.4rem;
  font-weight: 600;
}

.tag-link:hover .tag-count {
  background-color: rgba(255, 255, 255, 0.8);
  color: var(--color-primary);
}

.popular-tags-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 1.5rem;
}

.popular-tag {
  display: flex;
  flex-direction: column;
  transition: all 0.3s ease;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid var(--color-border);
}

.popular-tag:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}

.popular-tag-link {
  color: var(--color-text);
  padding: 1.25rem 1.5rem 0.75rem;
  margin-bottom: 0.75rem;
  border-bottom: 1px solid var(--color-border);
  background-color: var(--color-card);
}

.popular-tag-link:hover {
  text-decoration: none;
}

.popular-tag-name {
  font-size: 1.35rem;
  margin-bottom: 0.5rem;
  font-weight: 600;
  display: flex;
  align-items: center;
}

.popular-tag-name::before {
  content: '#';
  color: var(--color-primary);
  margin-right: 0.5rem;
  font-weight: 700;
}

.popular-tag-count {
  font-size: 0.875rem;
  color: #666;
  background-color: #f3f4f6;
  padding: 0.25rem 0.75rem;
  border-radius: 20px;
  display: inline-block;
}

.popular-tag-posts {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: 0 1.5rem 1.5rem;
  background-color: var(--color-card);
}

.popular-tag-post {
  font-size: 0.95rem;
  color: var(--color-text);
  opacity: 0.85;
  transition: all 0.2s;
  padding: 0.75rem;
  border-radius: 8px;
  position: relative;
  padding-left: 1.5rem;
}

.popular-tag-post::before {
  content: '•';
  position: absolute;
  left: 0.5rem;
  color: var(--color-primary);
  font-weight: bold;
}

.popular-tag-post:hover {
  opacity: 1;
  background-color: #f3f4f6;
  color: var(--color-primary);
}

@media (max-width: 768px) {
  .popular-tags-list {
    grid-template-columns: 1fr;
  }
}
</style>
